<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加商品</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav" style="z-index:999">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>

				<li v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
				</li>
				<li v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
						<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
					<a href="myShop.html">创建商品</a>
					<dl class="layui-nav-child">
						<dd><a href="myShopOrder.html">商家订单</a></dd>
					</dl>
				</li>
			</ul>
			<div class="myShop-itemApplication" >
				<form class="layui-form" action="">

					<div class="layui-form-item">
						<label class="layui-form-label">商品名：</label>
						<div class="layui-input-block">
							<input v-model="itemName" type="text" name="itemName" lay-verify="required" lay-reqtext="商品名不能为空" placeholder="请输入"
							 autocomplete="off" class="layui-input">
						</div>
					</div>


					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">价格(元)：</label>
							<div class="layui-input-inline">
								<input name="Price" v-model="Price" class="layui-input " required lay-verify="required" type="number" step="1"
								 min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">库存：</label>
							<div class="layui-input-inline">
								<input name="Number" v-model="number" class="layui-input " value="" placeholder="请输入金额" autocomplete="off" type="number"
								 required lay-verify="required" maxlength="11" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">商品描述</label>
							<div class="layui-input-block">
								<textarea type="text" v-model="itemContent" name="itemName" style="height:200px;" placeholder="请描述商品" autocomplete="off"
								class="layui-textarea"> </textarea>
							</div>
						</div>


						<div class="layui-form-item">
							<label class="layui-form-label">图片外链：</label>
							<div class="layui-input-block">
								<input type="text" v-model="itemurl" name="itemName" lay-verify="url" placeholder="请在网页中按F12看图片的源地址(大多在src属性中,如直接复制网页地址无效)"
								 autocomplete="off" class="layui-input">
							</div>
						</div>
						<img style="width:400px;height:400px;" :src="itemurl" title="举例百度搜图后右键点击'复制图片地址',成功的话可以显示图片" 
						/>
						

				</form>


			</div>
		</div>
		</div>


		<div style="z-index: 0;">

			<table class="layui-hide" id="test" lay-filter="test">





			</table>
<div style="font-size:20px;">Tips:考虑到书本信息的合法性，书本信息不允许商家私自录入，商家仅可以从已有记录的书本中选取任意数目的书本生成商品。</div>
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">创建商品</button>
	    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="tips">使用说明</button>
  </div>
  
</script>
		</div>


		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					userShowName: '请登录',
					username: '',
					loginflag: false,
					shopOrderList: [],
					page: 1,
					haveInit: false,
					shoppingcartnumber: 0,
					itemName: '',
					itemurl: '',
					number: 1,
					Price: 10,
					itemContent: '',
					itemImage: ''
				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					},
					statusFilter(value) {
						value = Number(value)
						if (value == 0) {
							return "待发货"
						}
						if (value == 1)
							return "待收货"
					}
				},
				methods: {

					loginplease: function() {
						if (this.loginflag)
							window.location.href = 'user.html'; //跳转主页
						else
							window.location.href = 'login.html'; //跳转主页
					},
				},

				created: function() {
					checklogin().then(x => {
						if (x) {

							if ($cookies.get("userName") != null)
								this.username = $cookies.get("userName")
							if ($cookies.get("userShowName") != null)
								this.userShowName = $cookies.get("userShowName")
							this.loginflag = $cookies.get("loginflag")

						} else {
							layui.use('layer', function() {
								var layer = layui.layer;
								layer.open({
									title: "提示" //不显示标题栏
										,
									closeBtn: false,
									shade: 0.8,
									id: 'LAY_layuipro' //设定一个id，防止重复弹出
										,
									btn: ['确认', '取消'],
									btnAlign: 'c',
									moveType: 1 //拖拽模式，0或者1
										,
									type: 0,
									content: '请重新登陆再使用店铺功能',
									yes: function(index, layero) {
										window.location.href = 'login.html'
										layer.close(index);
									},
									btn2: function(index, layero) {
										window.location.href = 'index.html'
									}
								});
							});
						}
					})

				},
				mounted: function() {


				}


			})
		</script>


		<script>
			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer

				//监听提交
				form.on('submit(demo1)', function(data) {

					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});

			});
			layui.use('table', function() {
				var table = layui.table;

				var tableIns = table.render({
					elem: '#test',
					url: URL + '/shop/selectBook' //数据接口
						,
					page: true, //开启分页
					limit:18,
					width: 1500,
					height: 800,
					parseData: function(res) { //res 即为原始返回的数据
						console.log(res.result)
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.result, //解析数据列表
						};
					},
					toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
						,
					title: '商家发货表',
					cols: [
						[{
								type: 'checkbox',
								fixed: 'left',
								title: "序号"
							}, {
								field: 'bookId',
								title: '书本编号',
								sort: true,width:94
							},
							{
								field: 'bookName',
								title: '书名',
								sort: true
							},{
								field: 'typeId',
								title: '分类',
								sort: true,
								templet: function(value) {
									var d=value.typeId
									if (d == 1)
										return "马克思主义、列宁主义、毛泽东思想、邓小平理论"
									else if (d == 2)
										return "哲学、宗教"
									else if (d == 3)
										return "社会科学总论"
									else if (d == 4)
										return "政治、法律"
									else if (d == 5)
										return "军事"
									else if (d == 6)
										return "经济"
									else if (d == 7)
										return "文化、科学、教育、体育"
									else if (d == 8)
										return "语言、文字"
									else if (d == 9)
										return "文学"
									else if (d == 10)
										return "艺术"
									else if (d == 11)
										return "历史、地理"
									else if (d == 12)
										return "自然科学总论"
									else if (d == 13)
										return "数理科学和化学"
									else if (d == 14)
										return "天文学、地球科学"
									else if (d == 15)
										return "生物科学"
									else if (d == 16)
										return "医药、卫生"
									else if (d == 17)
										return "农业科学"
									else if (d == 18)
										return "工业技术"
									else if (d == 19)
										return "交通运输"
									else if (d == 20)
										return "航空、航天"
									else if (d == 21)
										return "环境科学、劳动保护科学(安全科学)"
									else if (d == 22)
										return "综合性图书"
									else
										return "未分类"
								}
							}, {
								field: 'isbn',
								title: 'ISBN号',
								sort: true
							}, {
								field: 'author',
								title: '作者'
							}, {
								field: 'content',
								title: '书本介绍'
							}, {
								field: 'publishDate',
								title: '日期'
							}, {
								field: 'pageNum',
								title: '页数'
							}, {
								field: 'publisher',
								title: '出版商'
							}

						]
					],
					page: true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'getCheckData':

							var data = checkStatus.data;
							if (data.length > 0) {
								layer.confirm('是否用这几本书创建商品', {
									title: '提示'
								}, function(index) {
									let param = new URLSearchParams()
									param.append('userId', $cookies.get("userId"))
									param.append('passWord', $cookies.get("passWord"))
									param.append('userName', $cookies.get("userName"))

									param.append('itemName', vm.itemName)
									param.append('itemPrice', vm.Price)
									param.append('itemContent', vm.itemContent)
									param.append('itemNumber', vm.number)
									param.append('itemImage', vm.itemurl)

									param.append('book', JSON.stringify(data))
									console.log(param.toString())
									console.log(vm.Price)

									if (vm.itemName == '')
										layer.msg("商品名不能为空")
									else
									{
										axios.post(URL + '/shop/createItem', param)
										.then(function(response) {
											if (response.data.code == 1) {
												layui.use('layer', function() {
													layer.msg("成功创建商品",{
														time: 1500
													})
												});
												tableIns.reload({});
											} else if (response.data.code == 0) {
												layui.use('layer', function() {
													var layer = layui.layer;
													layer.msg('发货，请检查登陆状态')
												});
												console.log(response)
												console.log(response.data.msg)

											}
										})
										.catch(function(error) {
											console.log(error);
										});
									layer.close(index);
									}
								});

							}
							break;
								case 'tips':
								
								layer.msg("请勾选需要包含的书籍，在右侧填好商品信息后，点击左上角的创建商品按钮。",{time:4000})
								break;
					};
				});

			});
			<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});
		</script>

	</body>
</html>
